<template>
  <div>
    <van-tabbar v-model="active" active-color="#fc6627">
      <van-tabbar-item to="/" :icon="active === 0 ? iconSvg.homeSvg : iconSvg.homeIcon"
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        to="/question"
        :icon="active === 1 ? iconSvg.questionSvg : iconSvg.questionIcon"
        >问答</van-tabbar-item
      >
      <van-tabbar-item to="/video" :icon="active === 2 ? iconSvg.videoSvg : iconSvg.videoIcon"
        >视频</van-tabbar-item
      >
      <van-tabbar-item to="/user" :icon="active === 3 ? iconSvg.mineSvg : iconSvg.mineIcon"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
// 引入icon
import homeSvg from '@/assets/tabbar/homesel.svg'
import home from '@/assets/tabbar/home.svg'
import question from '@/assets/tabbar/q&a.svg'
import questionSvg from '@/assets/tabbar/q&asel.svg'
import video from '@/assets/tabbar/video.svg'
import videoSvg from '@/assets/tabbar/videosel.svg'
import mine from '@/assets/tabbar/mine.svg'
import mineSvg from '@/assets/tabbar/minesel.svg'
export default {
  name: 'tabbarPage',
  data() {
    return {
      active: 0, // 切换颜色,
      // 动态切换图标，太蠢了 可以使用人资项目的那个，但是没时间
      iconSvg: {
        homeIcon: home, // 原色
        homeSvg: homeSvg,
        questionIcon: question,
        questionSvg: questionSvg,
        videoIcon: video,
        videoSvg: videoSvg,
        mineIcon: mine,
        mineSvg: mineSvg
      }
    }
  }
}
</script>

<style></style>
